<template>
    <div class="valide-transfer">
    	
      <el-transfer
		    filterable
		    :titles="['可选IP', '已选IP']"
		    :filter-method="filterMethod"
		    filter-placeholder="请输入搜索内容"
		    v-model="selected"
		    :data="data"
		    @change="hostIpChange"
		    >
		  </el-transfer>
		  
    </div>
</template>

<script>
	import {getActiveIp} from "@/service/swagger/AcAppInstController";
	import {getOrchestrateActiveIp} from "@/service/swagger/OrchestrateController";
	
	export default {
		props : [
			"defaultValue" , // ["10.10.10.10","20.20.20.20"]
			"disabledValues",
		],
		data() {
      return {
      	serviceFn : getActiveIp ,
      	dV : [], // defaultValue
      	disV : [],
        data : [],
        selected: [],
        activeIps : [],
        filterMethod(query, item) {
        	return item.label.indexOf(query) > -1;
        }
      };
    },
    watch:{
    	defaultValue(n,o){
    		this.dV = n || [] ;
    		console.log("IPS defaultValue",n,o)
    	},
    	disabledValues(n,o){
    		this.disV = n || [] ;
    		console.log("IPS disabledValues",n,o)
    	},
    },
    mounted(){
    	//this.initData();
    	
    },
   	methods:{
   		initBPserviceFn(){
   			this.serviceFn = getOrchestrateActiveIp;
   			return this ;
   		},
   		setSelected(){
   			console.log("setSelected")
   			let arr = [];
   			if(this.dV&&this.dV.length){
    			for(let i in this.dV){
    				let _k = -1;
    				let _key ; // = parseInt( Math.random() * 100000)
    				for(let k in this.data){
    					if(this.data[k].label == this.dV[i]){
    						_k=k;
    						_key = this.data[k].key ;
    					}
    				}
    				if(_k>=0){
//  					let _key = parseInt( Math.random() * 100000)
//							this.data.push({
//								label : this.dV[i] ,
//								key : _key ,
//								sourceData: this.data[_k].sourceData ,
//								disabled : this.disV.indexOf( this.dV[i] ) > -1 ,
//							})
							arr.push(_key)
    				}
    			}
   			}
   			this.selected = arr ;
    		this.hostIpChange();
   		},
   		initData(params){
   			console.log("initData" , params)
   			if(params&&params.clusterId){
   				// let fn =  || getActiveIp
   				this.serviceFn(params).then(ret=>{
	   				if(!ret.code){
	   					
	   					let arr = [];
	   					let datas = ret.data;
	   					if(!ret.data.length){
	   						this.activeIps = ret.data.activeIps || [];
	   						datas = [...(ret.data.activeIps||[]),...(ret.data.usedIps||[])];
	   						if(ret.data.usedIps){
	   							let arr = [];
	   							ret.data.usedIps.forEach(el=>{
	   								arr.push(el.ip)
	   							})
	   							this.dV = arr;
	   						}
	   					}
	   					datas.forEach(el=>{
	   						arr.push({
	   							label: el.ip,
	   							key: parseInt( Math.random() * 100000),
	   							sourceData: el ,
	   							disabled : this.disV.indexOf( el.ip) > -1 ,
	   						})
	   					})
	   					this.data = arr;
	   					console.log("get data " , ret.data , this.data)
	   					this.setSelected();
	   				}
	   			})
   			}else{
   				this.data = [];
   				this.setSelected();
   			}
   		},
   		hostIpChange(value,arow){
   			let arr = [];
   			this.selected.forEach(el=>{
   				this.data.forEach(item=>{
   					if(item.key==el){
   						arr.push(item.sourceData)
   					}
   				})
   			});
   			this.$emit("change","zhujiIpTransfer",arr);
   		},
   	}
	}
</script>

<style lang="scss">
	@import "../../../styles/variables.scss";
	
	.el-transfer .el-transfer__buttons {
		transform: rotateZ(180deg) rotateY(180deg);
		
		.el-button span i {
			margin: 0;
		}
	}
	
	.valide-transfer {
		.el-input__inner {
			border-color: #dcdfe6 !important;
		}
	}
	
	.el-transfer-panel {
		vertical-align: top;
	}
	.el-transfer__buttons {
		margin-top: 120px;
	}
	.el-transfer-panel__body {
		overflow: hidden;
	}
	.el-checkbox-group {
		width: 100%;
	}
				
	.is-error {
		.valide-transfer {
			.el-transfer-panel {
				border-color: #f56c6c ;
			}
		}
	}
	
</style>

